<template>
  <div class="daohang">
    <div @click="dianji(index)" v-for="(item,index) in shuju" :key="index" :class="(xiabiao==index) ? 'zhuangtai' : '' ">{{item.name}}</div>
  </div>
</template>

<script>
export default {
  data(){
      return{
        xiabiao:0,
        shuju:[
          {name:'首页'},
          {name:'订单'},
          {name:'我的'}
        ]
      }
    },
  methods:{
      dianji(index){
        this.xiabiao=index
      }
    }
}
</script>

<style>
    .daohang{
        width: 94%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0px;
        border-top: 1px solid black;
    }
    .zhuangtai{
        color: red;
        font-weight: 700;
    }
</style>